<template>
  <view class="empty flex-center fdc" v-if="show">
    <u-icon
      class="u-m-b-60"
      :color="theme_color"
      :name="icon_name"
      size="220"
      custom-prefix="custom-icon"
    ></u-icon>
    <text>{{ text }}</text>
    <view @click="$emit('change')" v-if="bottom_text" class="empty-btn">{{ bottom_text }}</view>
  </view>
</template>

<script>
  /**
   * empty 内容为空
   * @description 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景。
   * @property {String} text 文字提示（默认“无内容”）
   * @property {Boolean} show 是否显示组件（默认true）
	 * <empty
			icon_name=""
			@change="点击按钮的方法"
			text="没有内容的提示"
			bottom_text="按钮文案，不传没有"
		 ></empty>
   */
  export default {
    props: {
      list: {
        type: Array,
        default: () => [],
      },
      finished: {
        type: Boolean,
        default: false,
      },
      loading: {
        type: Boolean,
        default: false,
      },
      // 文字提示
      text: {
        type: String,
        default: '还没有相关内容',
      },
      // 文字提示
      bottom_text: {
        type: String,
        default: '',
      },
      // 是否显示组件
      show: {
        type: Boolean,
        default: true,
      },
      // 图标名称
      icon_name: {
        type: String,
        default: 'icon_kong_dingdan',
      },
    },
    watch: {
      finished: {
        handler(val) {
          if (val) {
            this.status = 'nomore'
          }
        },
        immediate: true,
      },
    },
    data() {
      return {
        status: 'loadmore',
      }
    },
    mounted() {},
    methods: {},
  }
</script>

<style lang="scss" scoped>
  .empty {
    padding-top: 40%;
    color: #909090;
  }

  .empty-btn {
    width: 280rpx;
    height: 68rpx;
    margin-top: 20rpx;
    line-height: 68rpx;
    color: #fff;
    text-align: center;
    background: var(--color);
    border-radius: 44rpx;
  }
</style>
